<template>
  <div
    class="panel_line"
    v-if="colseFlag"
    :class="maximize ? 'Maximize' : ''"
    :style="{ width: theWidth + '%' }"
  >
    <div v-if="!headhidden">
      <div class="panel_line_head">
        <div class="head_left">
          <!-- 左侧图标 -->
          <slot name="leftIcon" class="leftIcon"></slot>
          <p>{{ title }}</p>
        </div>
        <!-- 右侧按钮 -->
        <slot name="head_right">
          <div v-if="headRightFlag && clickFlag">
            <span class="FirstSpan" @click="maximize = !maximize">
              <ExpandOutlined v-show="!maximize" />
              <CompressOutlined v-show="maximize" />
            </span>
            <span @click="reLoad">
              <RedoOutlined style="font-size: 14px" />
            </span>
            <span @click="minimize = !minimize">
              <MinusOutlined style="font-size: 14px" />
            </span>
            <span @click="colseFlag = !colseFlag">
              <CloseOutlined style="font-size: 14px" />
            </span>
          </div>
          <div v-if="headRightFlag && !clickFlag">
            <span class="FirstSpan">
              <ExpandOutlined v-show="!maximize" />
              <CompressOutlined v-show="maximize" />
            </span>
            <span>
              <RedoOutlined style="font-size: 14px" />
            </span>
            <span>
              <MinusOutlined style="font-size: 14px" />
            </span>
            <span>
              <CloseOutlined style="font-size: 14px" />
            </span>
          </div>
        </slot>
      </div>
      <transition>
        <div v-show="minimize">
          <a-skeleton active :paragraph="{ rows: 5 }" :loading="loading">
            <div
              class="panel_line_body"
              :class="[maximize ? 'Maximize_body' : '']"
              :key="panelKey"
            >
              <div :style="{ padding: bodyPadding }">
                <!-- 主体内容插槽 -->

                <slot><a-skeleton active /></slot>
              </div>

              <!-- 刷新占位 -->
              <!-- <div
          class="panel-loader"
          v-show="loaderFlag"
          :style="{ top: loadTop + 'px' }"
        >
          <a-spin size="large" />
        </div> -->
            </div>
          </a-skeleton>
        </div>
      </transition>

      <!-- 底部插槽 -->
      <slot name="footer"></slot>
    </div>
    <div v-else style="padding: 10px 0">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import {
    CloseOutlined,
    MinusOutlined,
    ExpandOutlined,
    CompressOutlined,
    RedoOutlined,
  } from '@ant-design/icons-vue'

  export default {
    components: {
      CloseOutlined,
      MinusOutlined,

      ExpandOutlined,
      CompressOutlined,
      RedoOutlined,
    },
    props: {
      title: {
        type: String,
        default: 'Line',
      },
      theWidth: {
        type: Number,
        default: 100,
      },
      headRightFlag: {
        type: Boolean,
        default: true,
      },
      headhidden: {
        type: Boolean,
        default: false,
      },
      bodyPadding: {
        type: String,
        default: '20px',
      },
      clickFlag: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        minimize: true,
        maximize: false,
        colseFlag: true,
        loadTop: 0,
        loading: false,
        panelKey:''
      }
    },
    methods: {
      reLoad() {
        //刷新功能
        this.loading = true
        this.panelKey = new Date().getTime()
        setTimeout(() => {
          this.loading = false
        }, 1000)
      },
    },
  }
</script>
<style scoped lang="less">
  /* v-enter ：  【这是一个时间点】 是进入之前,元素的起始状态，此时还没有开始进入
       v-leave-to：【这是一个时间点】 是动画离开之后，离开的终止状态，此时， 元素动画已经结束
    */
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateY(0px);
  }
  /*
      v-enter-active: 入场动画的时间段
      v-leave-active：离场动画的时间段
    */
  .v-enter-active,
  .v-leave-active {
    transition: all 1s;
  }
  @import './panalStyle.less';
</style>
